<template>
    <div class="shareRegister" >
        <form action="" @submit.prevent="register"  ref="registerForm">
            <div class="registerBox">
                <ul>
                    <li class="registerList">
                        <!-- <i class="nameImg"></i> -->
                        <input v-model="name" placeholder="昵称"
                            v-validate data-vv-rules="required|max:7" data-vv-as="昵称"
                            id="name" type="text" class="form-control" name="name" required>
                        <span class="help-block" v-show="errorBags.has('name')">{{errorBags.first('name')}}</span>
                    </li>
                        <li class="registerList">
                            <!-- <i class="mobileImg"></i> -->
                            <input v-model="registerMobile"  v-validate data-vv-rules="required|mobile" data-vv-as="手机号" id="registerMobile" type="mobile" class="" name="mobile" required placeholder="请输入手机号码" maxlength="11">
        <span class="help-block" id="verSpan" v-show="errorBags.has('mobile')">{{errorBags.first('mobile')}}</span>
                        </li>
                        
                        <li class="registerList">
                            <input type="text" placeholder="输入验证码" v-model="veriNum" style="width: 170px;padding-left: 10px;background-image:none;vertical-align: top;">
                            <button :disabled="disabledOnoff" type="button" @click="emitverCode('register','registerMobile')" >{{verText}}</button>
                        </li>
                        
                    <li class="registerList">
                        <!-- <i class="mobilePw"></i> -->
                        <!-- <input type="text" placeholder="设置密码" v-model="UserRegister.passWord"> -->
                        <input v-model="password" placeholder="设置密码"
        v-validate data-vv-rules="required|min:6|max:18" data-vv-as="密码"
            type="password" class="form-control" name="password" required>
    <span class="help-block" v-show="errorBags.has('password')">{{errorBags.first('password')}}</span>
                    </li>
                    <li class="registerList">
                        <!-- <i class="mobilePw"></i> -->
                        <!-- <input type="text" placeholder="请再次输入密码" v-model="UserRegister.passWords"> -->
                        <input id="registerPassword-confirm" placeholder="请再次输入密码"
                            v-validate data-vv-rules="required|min:6|confirmed:password" data-vv-as="确认密码"
                            type="password" class="form-control" name="password_confirmation" required>
                        <span class="help-block" v-show="errorBags.has('password_confirmation')">{{errorBags.first('password_confirmation')}}</span>
                    </li>
                </ul>
                <p class="pwProblem">
                    <!-- <i class="iconfont icon-zhuyi"></i> 两次输入不一致 -->
                </p>
                <div class="registerBtn">
                    <div>
                        <button @submit.prevent="register">注册</button>
                    </div>
                    <!-- <p>
                        点击注册表示同意拓者模型<span @click="loginClose"><router-link :to="{name: 'aboutJs', params: {activeName:'userPact'}}" tag="span">“用户协议”</router-link></span>
                    </p> -->
                </div>
            </div>
        </form>
        <div class="thereBox" v-if="false">
            <p class="thereLine"></p>
            <p class="thereText">第三方账号登录</p>
            <div class="thereIcon">
                <!-- <a href="http://192.168.1.162/threelogin/wechat" target="_blank"><div> -->
                    
                <a href="/threelogin/wechat" target="_blank"><div>
                </div></a>
                    <!-- <a href="http://192.168.1.162/threelogin/qq" target="_blank"><div> -->
                    <a href="/threelogin/qq" target="_blank"><div>
                    
                </div></a>
            </div>
        </div>
    </div>
</template>
<script>
import { ErrorBag } from 'vee-validate';
export default {
    data(){
        return{
            name:'',//用户昵称
            registerMobile:'',//注册手机号
            veriNum:'',//验证码
            disabledOnoff:'',//控制验证码按钮
            verText:'获取验证码',//验证码按钮的文字内容
            password:'',//密码
            disabledNum : 60,//验证码60秒计时
            disabledOnoff:false,//控制发送验证码按钮
        }
    },
    methods: {
        successPoint(msg) {//注册成功的提示
            this.$message({
                message: '恭喜你，'+msg,
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
        msgError(msg) {//账号密码输入错误提示信息
            this.$message({
                message: msg,
                type: 'error',
                customClass : "errorStyle",
                duration : 1500,
                showClose : true,
            });
        },
        emitverCode(){
            if($("#verSpan").css("display")=="none"){
                var This = this;
                if($("#verSpan").css("display")&&this.registerMobile){
                    this.disabledOnoff = true;//发送验证码按钮禁用
                    This.verText =  This.disabledNum+"s";
                    var timer = setInterval(function(){
                        This.verText =  This.disabledNum+"s";
                        This.disabledNum--;
                        if(This.disabledNum==0){
                            This.disabledNum =  59;
                            This.disabledOnoff=false;
                            This.verText="再次获取";
                            clearInterval(timer)
                        }
                    },1000)
                    var formData = {
                        'mobile':this.registerMobile,
                        'method':'register'
                    }
                    axios.post('/sendcode',formData).then(response => {
                        if(response.data.status==1){
                            
                        }else{
                            this.msgError('验证码发送失败')
                        }
                    }).catch(error=>{
                        this.msgError('手机号码已注册')
                    })
                }else if(!this.registerMobile){
                    this.msgError('请输入手机号码')
                }
            }
        },
        register(){
            this.$validator.validateAll().then(result => {
                if (result) {
                    let formData = {
                        name : this.name,
                        mobile : this.registerMobile,
                        password : this.password,
                        code : this.veriNum,
                        invite_code:this.$route.query.onlycode
                    };
                    return axios.post('/register',formData).then(response => {
                            if(response.data.status==1){
                                this.name = "";
                                this.registerMobile = "";
                                this.password = "";
                                this.successPoint('注册成功，请登录');//注册成功提示
                                this.$router.push('/')
                            }else if(response.data.status==0){
                                this.msgError('验证码输入有误')//验证码输入有误
                            }
                        }).catch(error=>{
                            if(error.response.data.errors.mobile){
                                this.msgError('手机号码已注册，请更换手机号码')
                            }else if(error.response.data.errors.name){
                                this.msgError('昵称已注册，请更换昵称')
                            }else{
                                this.msgError('注册失败，请从新注册')
                            }
                            
                        })
                    }
            }) 
        }
        
    }
}
</script>

<style>
    .shareRegister .registerBox li{
        width:285px;
        /* height: 34px; */
        margin-bottom: 16px;
    }
    .shareRegister .registerBox input{
        width: 285px;
        height: 34px;
        line-height: 34px;
    }
    .shareRegister .registerBox li:nth-of-type(3) button{
        width: 104px;
        height: 34px;
        font-size: 14px;
        line-height:34px;
        vertical-align: top;
    }
    .shareRegister .registerBtn div button{
        width: 287px;
        height: 36px;
        line-height: 36px;
        font-size: 12px;
        border-radius: 4px;
    }
    .shareRegister .thereText{
        font-size: 12px;
        line-height: 20px;
        top: -11px;
        left: 120px;
    }
    .shareRegister .thereBox{
        height: 100px;
    }
    .shareRegister .registerBtn {
        padding-bottom: 30px;
    }
    .shareRegister .thereIcon{
        margin-top: 26px;
    }
</style>